<template>
  <div class="tmp-panel">
    <div class="tmp">{{city.temperature}}<b class="sup">&#8451;</b></div>
    <div class="weather">
      <i class="icon" :style="{backgroundImage:`url('${weatherIcon}')`}"></i>
      <b class="text">{{city.weather}}</b>
    </div>
  </div>
</template>

<script>
import { textToCode, getWeatherObj } from '@/tools'
export default {
  name: 'tmp-panel',
  props: {
    city: {
      type: Object,
      required: true
    }
  },
  computed: {
    weatherIcon() {
      return getWeatherObj(textToCode(this.city.weather)).icon
    }
  }
}
</script>

<style lang="stylus">
$size = 100px;

.tmp-panel {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  margin-bottom: 20px;

  .tmp {
    font-size: 80px;
  }

  .sup {
    font-size: 30%;
    vertical-align: top;
  }

  .weather {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .icon {
    width: $size;
    height: $size;
    background: center / cover no-repeat;
  }

  .text {
    margin-top: 0.5em;
  }
}
</style>
